<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<c:set var="path" value="${pageContext.request.contextPath }" />
<%@ taglib tagdir="/WEB-INF/tags" prefix="matrix"%>
<%@ taglib uri="http://matrixcsm.zkingsoft.com" prefix="cms"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp">
<title data-index="3" id="selextTitle">${网页标题 }</title>
<meta name="keywords" content="${网页关键词}">
<meta name="description" content="${网页描述 }" />
<!--[if lt IE 8]>
    <meta http-equiv="refresh" content="0;ie.html" />
    <![endif]-->
<link
	href="${path }/resource/plugin/bootstrap-3.3.5/css/bootstrap.min.css"
	rel="stylesheet" type="text/css">
<link
	href="${path }/resource/plugin/font-awesome/css/font-awesome.min.css"
	rel="stylesheet" type="text/css">
<link href="${path }/resource/css/styleOne/animate.min.css"
	rel="stylesheet" type="text/css" />
<link href="${path }/resource/css/visitor/base.css" rel="stylesheet"
	type="text/css">
<link rel="shortcut icon" href="${浏览器logo }">
<style>
.banner {
	width: 100%
}

.banner img {
	width: 100%
}

.news {
	padding-bottom: 60px;
}

.news .wrap {
	margin-top: 25px;
	overflow: hidden;
}

.news .wrap .left {
	width: 100%;
	background: #ffffff;
}

.fl {
	float: left;
}

.fr {
	float: right;
}

.news .wrap  .tab-list {
	margin-bottom: 25px;
}

.news .wrap  .tab-list a {
	height: 34px;
	background: #ffffff;
	padding: 0 30px;
	margin-right: 12px;
	color: #555555;
	display: inline-block;
	font-size: 16px;
	line-height: 34px;
	border-radius: 10px;
}
.news .wrap  .tab-list a:hover{color: #ffffff;
	background: #c18a3c}
.news .wrap  .tab-list a.active {
	color: #ffffff;
	background: #c18a3c
}

.news .wrap .left ul {
	padding: 0 35px;
}

.news .wrap .left ul li {
    cursor: pointer;
	width: 45%;
	margin-right: 85px;
	float: left;
	position: relative;
	color: #555555;
	border-bottom: 1px solid #f4f4f4;
	height: 65px;
	line-height: 65px;
}

.news .wrap .left ul li:nth-of-type(even) {
	margin-right: 0;
}

.news .wrap .left ul li .solid {
	position: absolute;
	top: 50%;
	margin-top: -2px;
	width: 6px;
	height: 6px;
	background: #c6944e;
	border-radius: 50%;
	display: inline-block
}

.news .wrap .left ul li span {
	display: inline-block;
}

.news .wrap .left ul li .time {
	padding-left: 20px;
	font-size: 16px;
	color: #555555;
}

.news .wrap .left ul li .head {
	margin-left: 15px;
	border-radius: 10px;
	background: #c6944e;
	color: #ffffff;
	width: 66px;
	height: 22px;
	line-height: 22px;
	text-align: center;
}

.news .wrap .left ul li .abstract {
	margin-left: 20px;
}

.news .wrap .right {
	width: 550px;
	height: 412px;
	overflow: hidden
}

.news .wrap .right img {
	width: 100%;
	height: 362px;
}

.news .wrap .right span {
	width: 100%;
	background: #c78d56;
	color: #ffffff;
	height: 50px;
	font-size: 16px;
	line-height: 50px;
	text-align: center;
	display: block
}

.tab-con {
	display: none;
	height: 260px;
}

.tab-con:nth-of-type(1) {
	display: block;
}

.pages {
	text-align: center;
	margin: 0px auto 50px;
}

.pages a {
	margin-right: 5px;
	width: 34px;
	height: 34px;
	line-height: 34px;
	text-align: center;
	background: #e7d094;
	color: #ffffff;
	display: inline-block;
	border-radius: 4px;
}
.pages a:hover{background: #c6944e}
.pages a.active {
	background: #c6944e
}
.menu-wrap{    position: relative;}
.menu{position: absolute;z-index: 23;padding-top:12px;display:none;}
.business-wrap{position: absolute;left:175px;top:11px;height:432px;}
</style>

</head>
<body class="">
<div id="app">
	<jsp:include page="_top.jsp"></jsp:include>
	<div class="container menu-wrap wrap-box">
		<ul class="menu">
			<cms:ad var="items" code="ywfl"></cms:ad>
			<c:forEach var="item" items="${items }">
				<li  @mouseover="selectAd('${item.adUrl }')" ><a href="${item.adUrl }" target="blank"><img
						src="${item.adImg }" alt="">${item.adTitle }</a></li>
			</c:forEach>
		</ul>
		<div class="business-wrap">
           <div class="business-list" v-for="item in ads">
               <div class="img-box"><img :src="item.adImg" alt=""></div>
               <div>
                   <h4><a href="">{{item.adTitle}}</a></h4>
                   <div class="business-list-link">
                      {{item.adInfo1}}
                   </div>
                   <div class="btns"><a :href="item.adUrl">在线咨询</a><a target="blank" :href="item.adUrl">查看详情</a></div>
               </div>
           </div>
       </div>
	</div>
	<div class="banner">
		<cms:ad var="banner" code="xwbanner" multi="false"></cms:ad>
		<img src="${banner.adImg}" alt="">
	</div>
	<div class="gray-bg" >
		<div class="container">
			<div class="news">
				<div class="wrap">
					<div class="tab-list">
						<a href="javascript:;"  v-on:click="changeType('xw','全部')" class="all active">全部</a>
						<cms:artType var="type" code="xw"></cms:artType>
						<c:forEach items="${type }" var="item">
							<a v-on:click="changeType('${item.code}','${item.artTypeName }')"
								href="javascript:;">${item.artTypeName }</a>
						</c:forEach>
					</div>
					<div class="left fl">
						<ul class="tab-con">
							<li v-for="item in arts" v-on:click="toArticle(item.artId)">
								<span class="solid"></span> <span class="time">{{item.artCreatetiem
									| getYear}}</span> <span class="head">{{item.artTypeName}}</span> <span
								class="abstract">{{item.artTitle}}</span>
							</li>
						</ul>
						<div class="pages">
				<a  v-for="i in pageCount" href="Javascript:void(0)" @click="changePage(i)" >{{i}}</a>
			</div>
					</div>

				</div>
			</div>
			
		</div>
	</div>
	</div>

	<jsp:include page="_foot.jsp"></jsp:include>
</body>
<script type="text/javascript"
	src="${path }/resource/js/plugin/jquery-2.1.4.min.js"></script>
<script type="text/javascript"
	src="${path }/resource/js/systools/AjaxProxy.js"></script>
<script type="text/javascript"
	src="${path }/resource/plugin/bootstrap-3.3.5/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript"
	src="${path }/resource/js/visitor/index.js"></script>
<script>
	var app = new Vue({
		el : '#app',
		data : {
			offset : 0,
			limit : 10,
			pageCount:0,
			arts : [],
			jzbz : [],
			zzxkz : [],
			ads:[],
			bgzx : [],
			fwal : [],
			code : "xw", // 默认新闻
			typeName : '企业动态'
		},
		filters : {
			getYear : function(value) {
				var data = new Date(value);
				return data.getFullYear();
			}
		},
		methods : {
			selectAd:function(code){
				$.AjaxProxy({
					c : false,
					p : {
						"code" : code
					}
				}).invoke("${path}/findAd", function(loj) {
					app.ads = loj.getValue("rows");
				});
			},
			changeType : function(code, name) {
				app.code = code;
				app.typeName = name;
				app.loadArt();
			},
			toArticle : function(id) {
				window.open("${path}/redirect/newsDetails?id=" + id);
			},
			changePage:function(i){
				app.offset=(i-1)*app.limit;
				app.loadArt();
			},
			loadArt : function() {
				
				$.AjaxProxy({
					c : false,
					p : {
						"offset" : app.offset,
						"limit" : app.limit,
						"code" : app.code
					}
				}).invoke("${path}/findNews", function(loj) {
				var rowcount=loj.getValue("total");
					if(rowcount%app.limit==0){
						app.pageCount=rowcount/app.limit;
						}else{
							app.pageCount=parseInt(rowcount/app.limit)+1;
						}
					app.arts = loj.getValue("rows");
				});
				
			},

		},
	});
	app.loadArt();

	$(".tab-list a").click(function() {
		$(this).addClass("active").siblings().removeClass("active")
	})
	$(".pages a").click(function() {
		$(this).addClass("active").siblings().removeClass("active")
	})
</script>

</body>
</html>
